<template>
	<view class="index-content" style="background: white">
		 <view class="index-header" style="top: 0%;">
			<view class="icon_header">
				<view class="icon-gender" @tap="showGender">
					<image v-if="gender===1" src="../../static/img/home/boy.png" 
					style="width: 30px;height: 30px;margin-top: 8px"></image>
					
					<image v-else-if="gender===2" src="../../static/img/home/girl.png" 
					style="width: 30px;height: 30px;margin-top: 8px"></image>
					
					<image v-else src="../../static/img/common/logo.jpg" 
					style="width: 30px;height: 30px;margin-top: 8px"></image>
				</view>
				<view class="index-search" @tap="toSearchIndex" style="margin-left: 70px;margin-right: 60px">
					<view>
						<!-- <text class="cuIcon cuIcon-search" style="margin-right: 6px"></text>
						<text>请输入工程名查询</text> -->
						<text>中国建筑股份有限公司</text>
					</view>
				</view>
				<view class="icon_suji" @tap="toZujiIndex" style="margin-right: 10px;margin-top: 2px">
					<text class="iconfont icon-zuji" style="color:#dcdcdc;font-size: 24px"></text>
				</view>
			</view>
		</view> 

         <!-- 首页轮播-->
		<view class="swiper" style="background: white" v-if="banners.length>0">
			<swiper class="swiper-container" :autoplay="true" :interval="4000" :circular="true" :indicator-dots="true"
			 indicator-active-color="#FC3F78" indicator-color="#cccccc"
			  style="height: 480upx;padding: 8rpx 6rpx 6rpx 8rpx;
			  ">
				<block v-for="(item, index3) in banners" :key="index3">
					<swiper-item class="swiper-wrapper">
						<image @tap="toGoodsInfos(item.itemid)" :src="item.itempic" style="width: 100%;height: 460upx" mode="scaleToFill"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		
		<!-- 导航栏菜单 -->
		<view style="background: white;">
			 <view class="index-navlist s-grids" v-if="couponlist.length > 0" style="background: whitesmoke;padding: 1%;">
				<view class="index-navlist s-grids" v-if="couponlist.length > 0" style="padding-top: 10px;padding-bottom: 10px;background: white;border-radius:5px">
					<view class="is-col-1-5 is-center" v-for="(nav,index) in navlist" :key="index" @tap="toNavList(nav.url,nav.title)">
						<view class="has-pdtb-5">
							<image :src="nav.image" mode="widthFix" style="height: 30px;width: 30px"></image>
							<view v-if="nav.url=='13'" style="margin-top: 2px;color: red;font-weight: bold" class="is-size-14">
								{{nav['title']}}
							</view>
							<view v-else style="margin-top: 2px;" class="is-size-14">{{nav['title']}}</view>
						</view>
					</view>
				</view>
			</view>	 
			
		
		</view>
		
		<button @click="closeLunog">测试引导页</button>
		
		<view>
			<scroll-view v-if="couponlist.length > 0" scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft" style="z-index: 100;padding-left:8px;padding-right: 8px "
			 v-bind:class="[scrollTops ? 'scroll_top_act' : '','']">
				<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in category" :key="index" @tap="tabSelect"
				 :data-id="index">
					<text :style="index==TabCur?'background: #F15B6C;color: white;padding: 2px 10px 2px 10px;border-radius: 16px;margin-right: -10px':'background: transparent;color: #333333;margin-right: -10px'">
						{{item.name}}
					</text>
				</view>
			</scroll-view>
		</view>
		<!-- 首页右上角头像点击事件 -->
		<simpleModal ref="simpleModalTkl" @maskClose="TklmaskClose">
			<view class="buy-box-title">选择您的身份</view>
			<view class="buy-box-center">
				<view class="code-cent" style="padding: 30px 80px 40px 80px">
					<view style="margin-bottom: 16px" @tap="choseGender(1)">
						<image src="../../static/img/home/boy.png" style="width: 50px;height: 50px"></image>
						<view style="color: #0e80d2">我是帅哥</view>
					</view>
					<view @tap="choseGender(2)">
						<image src="../../static/img/home/girl.png" style="width: 50px;height: 50px"></image>
						<view style="color: pink">我是美女</view>
					</view>
				</view>
			</view>
		</simpleModal>
		<simpleModal ref="simpleModalTkls" @maskClose="TklmaskClose">
			<view style="width: 600upx;border-radius: 16upx;">
				<view class="buy-box-title" style="font-weight: bold;color: #FF6DB2;">全网超级搜</view>
				<view class="buy-box-center">
					<view class="code-cent">
						<view style="padding: 8px;font-size: 32upx">{{ copyTklStatus }}</view>
					</view>
					<view class="buy-btn-copy" @click="goSearch()">立即搜索</view>
				</view>
			</view>
		</simpleModal>
		<!-- 领券直播 -->
		<view class="index-coupon has-pd-10" style="margin: 4px;background: #F6F6F6">
			<view class="goods-list" v-if="couponlist.length > 0">
				<orange-goods-card-home v-for="(item,index) in couponlist" :index="index%2" :logo="logo" :tkmoney='"￥"+item.tkmoney'
				 :itemid="item.itemid" :itempic="item.itempic?item.itempic+'_310x310.jpg':'https://www.gomyorder.cn/logo.png'"
				 :itemtitle="item.itemtitle" :itemprice='"¥"+item.itemprice' :itemsale="item.itemsale" :itemendprice='""+item.itemendprice'
				 :couponmoney="item.couponmoney"></orange-goods-card-home>
			</view>
		</view>
		<!-- 加载更多提示 -->
		<view class="s-col is-col-24" v-if="couponlist.length> 0">
			<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
		</view>
		<!-- 悬浮上拉 -->
		<view class="scroll_top" @tap="topScrollTap" v-bind:class="[scrollTop ? 'active' : '','']" style="bottom: 56px;">
			<text class="iconfont icon-shangla"></text>
		</view>
		<!-- 加载更多提示 -->
		<!-- 加载更多提示 -->
		<network v-if="couponlist.length === 0&&showEmpty" des="暂无数据"></network>
	</view>
</template>

<script>
	import simpleModal from '@/components/simple-pro/customModal.vue';
    let _this;
	export default {
		onShareAppMessage(res) {
			return {
				title: '购物先领券，一年省一半',
				path: '/pages/index/index'
			}
		},
		components: {
			simpleModal
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
			this.scrollTops = e.scrollTop > 720;
		},
		onShow() {
			//#ifndef H5
			this.getClipboardData();
			//#endif
		},
		
		data() {
			return {
				logo: "../../static/img/mao.png",
				TabCur: 0,
				copyTklStatus: '',
				scrollLeft: 0,
				scrollTop: false,
				scrollTops: false,
				showEmpty: false,
				category: [{
						name: '工程预览'
					}
				],
				banners: [],
				navlist: [{
						title: "材料管理",
						image: "../../static/img/home/cailiaoguanli.png",
						url: '9'
					},
					{
						title: "成本控制",
						image: "../../static/img/home/cbkz.png",
						url: '1'
					},
					{
						title: "设备供方管理",
						image: "../../static/img/home/shebei.png",
						url: '8'
					},
					{
						title: "合同管理",
						image: "../../static/img/home/hetong.png",
						url: '4'
					}, {
						title: "全部",
						image: "../../static/img/home/quanbu.png",
						url: 'remeng'
					}
				],

				juhuasuanlist: [],
				couponlist: [],
				dataList: [],
				page: 1,
				min_id: 1,
				min_ids: 1,
				min_ida: 1,
				cat_id: 0,
				gender: 0,
				loadingType: 0,
				index: 0,
				genderKey: "gender",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		methods: {
			closeLunog:function(){
				uni.showModal({
					title: '清除launchFlag值',
					content: '确定要清除launchFlag值，进行重启测试？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							// 清除缓存
							uni.clearStorage();
							// 两秒后重启
							// #ifdef APP-PLUS
							uni.showToast({
								icon: 'none',
								duration:3000,
								title: '清除成功2秒后重启'
							});
							setTimeout(function() {
								uni.hideToast();
								plus.runtime.restart();
							}, 2000);
							// #endif
							// 两秒后跳转
							// #ifdef H5 || MP-WEIXIN
							uni.showToast({
								icon: 'none',
								duration:3000,
								title: '清除成功2秒后刷新'
							});
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/index/index'
								});
							}, 2000);
							
							// #endif
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			loadExecution: function(){
				/**
				 * 获取本地存储中launchFlag的值
				 * 若存在，说明不是首次启动，直接进入首页；
				 * 若不存在，说明是首次启动，进入引导页；
				 */
				try {
				    const value = uni.getStorageSync('launchFlag');
					
					console.log(value)
				    if (value) {
				        if (value == true) {				
							//判断是否登录
							 _this.isNoLogin();
				           /* uni.switchTab({
				                url: '/pages/index/index'
				            }); */
				        } else {
				            uni.redirectTo({
				                url: '/pages/index/guide'
				            });
				        }
				    } else {
				        uni.setStorageSync('launchFlag',true);
				        uni.redirectTo({
				            url: '/pages/index/guide'
				        });
				    }
				}
				 catch(e) { 
					// error 
					uni.setStorage({ 
						key: 'launchFlag', 
						data: true, 
						success: function () {
							console.log('error时存储launchFlag');
						} 
					}); 
					uni.redirectTo({ url: '/pages/index/guide' }); 
				}
				/* return;
				uni.switchTab({
				    url: '/pages/index/index'
				}); */
			},
			//判断用户是否登录
			isNoLogin:function(){
				/* 
				  * 获取本地存储中userInfo的值
				  * 若存在，说明已经登录，直接进入首页；
				  * 若不存在，说明没有登录，进入登录页；
				 */
				 const value = uni.getStorageSync('userInfo')+"";
				 /* console.log("launchFlag="+uni.getStorageSync('launchFlag'));
				 console.log("userInfo="+value) */
				 if(value!=null && value !=""){
					/* uni.switchTab({
					     url: '/pages/index/index'
					 }); */
					 console.log("已经登录")
					 
				 }else{
					 uni.redirectTo({
					     url: '/pages/login/login'
					 });
				 }
				
				
				
			},
		
			//app查询
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search?keywords=' + this.copyTklStatus
				});
				this.$refs.simpleModalTkls.hide();
				this.copyTklStatus = '';
				uni.setClipboardData({
					data: '',
					success: r => {
						uni.showToast({
							icon: 'none',
							title: '搜索中',
							duration: 1500
						});
					}
				});
			},
			//app查询弹框
			TklmaskClose: function(e) {
				this.$refs.simpleModalTkls.hide();
				this.copyTklStatus = '';
				uni.setClipboardData({
					data: '',
					success: r => {
						uni.showToast({
							icon: 'none',
							title: '已取消',
							duration: 1500
						});
					}
				});
			},
			TklmaskCloses: function(e) {
				this.$refs.simpleModalTkls.hide();
			},
			//获取剪切板
			async getClipboardData() {
				let that = this;
				uni.getClipboardData({
					success: function(res) {
						that.copyTklStatus = res.data;
						if (res.data) {
							if (res.data.indexOf('http') == -1 && res.data.indexOf('&') == -1 && res.data.indexOf('￥') == -1) {
								that.$refs.simpleModalTkls.show({
									showConfirmButton: false
								});
							} else {
								that.$refs.simpleModalTkls.hide();
							}
						} else {
							that.$refs.simpleModalTkls.hide();
						}
					},
					fail: function(res) {}
				});
			},
			choseGender(type) {
				this.$queue.setData(this.genderKey, type);
				this.gender = type;
				this.page = 1;
				this.min_id = 1;
				if (type === 1) {
					this.TabCur = 2;
					this.cat_id = 2;
				}
				if (type === 2) {
					this.TabCur = 1;
					this.cat_id = 1;

				}
				this.loadBanner();
				this.loadJuhuasuanlist();
				this.loadCouponList("Refresh");
				this.$refs.simpleModalTkl.hide();
			},
			showGender() {
				this.$refs.simpleModalTkl.show({
					showConfirmButton: false,
				});
			},
		
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.cat_id = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.page = 1;
				this.min_id = 1;
				uni.showLoading({
					title: '加载中...'
				});
				this.loadCouponList("Refresh");
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},

			loadCouponList: function(type) {
				this.loadingType = 1;
				this.$Request.get("/column/apikey/maxd/type/9/back/20/min_id/" + this.min_id + "/sort/9/cid/" + this.cat_id).then(
					res => {
						this.loadingType = 0;
						if (res.code === 1) {
							if (this.page === 1) {
								this.couponlist = [];
							}
							this.min_id = res.min_id;
							res.data.forEach(d => {
								d.tkmoney = (d.tkmoney / 2).toFixed(2);
								d.itemsale = d.itemsale > 10000 ? "已售 " + (d.itemsale / 10000).toFixed(1) + "万" : "已售 " + d.itemsale;
								this.couponlist.push(d);
							});
						} else {
							this.loadingType = 2;
						}
						this.showEmpty = true;
						if (type === "Refresh") {
							uni.stopPullDownRefresh(); // 停止刷新
						}
						uni.hideLoading();
					})
			},
			//首页轮播图数据加载函数
			loadBanner: function() {
				 this.$Request.get("/column/apikey/maxd/type/2/back/5/min_id/1/sort/0/cid/" + this.cat_id).then(res => {
					if (res.code === 1) {
						this.banners = []
						res.data.forEach(d => {
							this.banners.push(d);
						});
						// console.log(this.banners);
					}
				}) 
				
				
				
			},

			loadDataList: function() {
				this.$Request.get("/get_deserve_item/apikey/maxd").then(res => {
					for (let i = this.index; i < 8; i++) {
						this.dataList.push(res.item_info[i]);
					}
				})
			},
			loadJuhuasuanlist: function() {
				this.$Request.get("/column/apikey/maxd/type/1/back/10/min_id/" + this.min_ids + "/sort/0/cid/" + this.cat_id).then(
					res => {
						if (res.code === 1) {
							this.juhuasuanlist = [];
							for (let i = this.index; i < this.index + 8; i++) {
								this.juhuasuanlist.push(res.data[i]);
							}
							this.min_ids = res.min_id;
						}
						uni.stopPullDownRefresh(); // 停止刷新
					})
			},
			toNavList: function(url, title) {
				if (url === 'remeng') {
					uni.navigateTo({
						url: "/pages/categray/index"
					})
				} else if (url === 'pinduoduo') {
					//#ifndef H5
					uni.navigateTo({
						url: "/pages/member/ping?url=https://mobile.yangkeduo.com/duo_cms_mall.html?pid=8948958_104234125&cpsSign=CM_190809_8948958_104234125_05e68780da621fd572b728c3ae1ee027&range_items=1%3A0%3A10000%2C2%3A10%3A1000&duoduo_type=2"
					});
					//#endif
					//#ifdef H5
					window.location.href =
						"https://mobile.yangkeduo.com/duo_cms_mall.html?pid=8948958_104234125&cpsSign=CM_190809_8948958_104234125_05e68780da621fd572b728c3ae1ee027&range_items=1%3A0%3A10000%2C2%3A10%3A1000&duoduo_type=2";
					//#endif
				} else if (url === 'shoucang') {
					uni.navigateTo({
						url: "/pages/footer/like",
					})
				} else if (url === 'jingdong') {
					uni.navigateTo({
						url: "/pages/jd/list",
					})
				} else if (url === 'rexiao') {
					uni.switchTab({
						url: "/pages/hot/index",
					})
				} else if (url === 'daequan') {
					uni.navigateTo({
						url: "/pages/index/dae?title=" + title + "&type=9",
					})
				} else if (url === 'meishi') {
					uni.navigateTo({
						url: "/pages/index/food?title=" + title + "&type=9",
					})
				} else if (url === 'gaoyongjingxuan') {
					uni.navigateTo({
						url: "/pages/index/double?title=" + title + "&type=9"
					})
				} else if (url == 22) {
					uni.navigateTo({
						url: "/pages/cate/index",
					})
				} else {
					uni.navigateTo({
						url: "/pages/index/list?title=" + title + "&type=" + url,
					})
				}
			},
			toGoodsInfo: function(url) {
				console.error(url)
				if (url.indexOf("/pages/") !== -1) {
					uni.navigateTo({
						url:"/pages/member/webview?url=" + url
					});
				} else {
					//#ifndef H5
					uni.navigateTo({
						url: "/pages/member/webview?url=" + url
					});
					//#endif
					//#ifdef H5
					window.location.href = url;
					//#endif
				}
			},
			//首页轮播图片点击跳转函数
			toGoodsInfos: function(itemid) {
				uni.navigateTo({
					url: "/pages/projectNavicat/projectNav?itemid=" + itemid,
				})
			},
			toSearchIndex: function() {
				uni.switchTab({
					url: "/pages/homeSearch/index"
				})
			},
			toZujiIndex: function() {
				uni.navigateTo({
					url: "/pages/footer/index"
				})
			}
		},
		onLoad: function() {
		     _this=this;
			 this.loadExecution();
			
			let gender = this.$queue.getData(this.genderKey);
			if (gender) {
				if (gender === 1) {
					this.gender = gender;
					this.cat_id = 2;
				}
				if (gender === 2) {
					this.gender = gender;
					this.cat_id = 1;
				}

			}
			uni.showLoading({
				title: '加载中...'
			});
			this.loadBanner();
			this.loadDataList();
			this.loadJuhuasuanlist();
			this.loadCouponList();
		},
		onReady: function() {
			this.loadJuhuasuanlist();
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.loadCouponList();
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.min_id = 1;
			this.loadBanner();
			this.loadJuhuasuanlist();
			this.loadCouponList("Refresh");
		}
	}
</script>

<style>
	@import "../../static/css/index.css";


	.swiper-item img {
		display: block;
	}


	.title .fr {
		float: right;
		line-height: 50px;
		margin-right: 16px;
		font-size: 10px;
		color: #ccc;
	}

	/*#ifndef APP-PLUS*/
	.scroll_top_act {
		background: white;
		top: 45px;
		position: fixed;
	}

	/*#endif*/
	/*#ifdef APP-PLUS*/
	.scroll_top_act {
		background: white;
		top: 65px;
		position: fixed;
	}

	/*#endif*/

	.banner {
		border-radius: 10px;
		margin: 8px 8px 0 8px;
		overflow: hidden;
		display: flex;
	}

	.banner img {
		width: 100%;
	}

	.banner>.left {
		flex: 4;
		/* margin-right: 10upx; */
		border-right: 2px solid #f2f2f2;
		overflow: hidden;
	}

	.banner>.right {
		flex: 7;
	}

	.right .top {
		width: 100%;
		/* margin-bottom: 7upx; */
		/*border-bottom: 2px solid #f2f2f2;*/
		overflow: hidden;
	}

	.right .bottom {
		display: flex;
		width: 100%;
	}

	.right .bottom .bottom-left {
		flex: 6;
		/* margin-right: 5upx; */
		overflow: hidden;
		border-right: 1px solid #f2f2f2;
	}

	.right .bottom .bottom-right {
		flex: 6;
		/* margin-left: 5upx; */
		/* border-left: 1px solid #f2f2f2; */
		overflow: hidden;
	}

	.marquee-box {
		border-radius: 5px;
		overflow: hidden;
		position: relative;
		background: #fff;
		height: 26px;
		line-height: 26px;
	}

	.marquee-title {
		padding-left: 8px;
		padding-right: 8px;
		position: absolute;
		color: #ff5100;
		top: 0;
		left: 0;
		z-index: 3;
		background: #fff;
		font-size: 14px;
	}

	.marquee {
		padding: 6px 10px;
		color: #000;
		display: inline-block;
		white-space: nowrap;
		animation: 35s wordsLoop linear infinite normal;
		font-size: 14px;
	}

	@keyframes wordsLoop {
		0% {
			transform: translateX(350px);
			-webkit-transform: translateX(350px);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}
</style>
